<template>
  <section class="select4beforecomponents">
    <el-select v-model="value" :allow-create="allowcreate" :clearable="clearable" :filterable="filterable" :placeholder="placeholder" :disabled="disabled" style="width: 100%;" @change="handleChange">
      <el-option v-for="(item, index) in compList" :key="index" :label="item.label" :value="item.id" />
    </el-select>
  </section>
</template>
<script>
import mixins from './../mixins'
import request from '@/utils/request'
import FieldMap from '@/components/CustomPage/apps/map'
export default {
  name: 'Select4beforecomponents',
  mixins: [mixins],
  inject: ['comps', 'focusId'],
  props: {
    option: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      compList: []
    }
  },
  computed: {
    _comps() {
      return this.comps()
    },
    _focusId() {
      return this.focusId()
    },
    list() {
      return this.option.list || []
    },
    filterable() {
      return this.option.filterable
    },
    allowcreate() {
      return this.option.allowcreate
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this._comps.forEach(a => {
        a.components.forEach(b => {
          if (b.id !== this._focusId) {
            this.compList.push({
              label: b.option.option.label,
              id: b.id
            })
          }
        })
      })
      this.dispatch_event('filed-visible', this.compList.length !== 0)
    },
    getValue() {
      return this.value
    },

    setValue(k) {
      this.$set(this, 'value', k)
    },

    setCheck() {
      let { value, required } = this
      let error = false; let errorMsg = ''
      if (value !== undefined && value !== null) {
        value = value + ''
      }
      if (required && !value) {
        error = true
        errorMsg = '必填选项不能为空'
      }
      this.error_ = error
      this.error_message_ = errorMsg
      this.fieldCheck()
    },

    handleChange(e) {
      this.setCheck()
      // this.dispatch_event('filed-value-change', e)
    }
  }
}
</script>
